<template>
	<view>
		<view class="btnBox flex-row-center-sb">
			<view class="btnItem" v-for="(item,index) in btnList" :key="index" @click="btnClick(item)">
				{{item.title}}
			</view>
		</view>


		<u-popup :show="showPayCost" mode="center" @close="showPayCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx;">请选择缴纳费用项</view>
				<view class="flex-row-center-sb payCostItem" v-for="(item, index) in payCostList" :key="index"
					@click="changeCostItem(item)">
					<text>{{ item.remark }}</text>
					<view class="flex-row-center">
						<text style="color: red;margin-right: 10rpx;">待付:{{ item.unpaidAmount }}元</text>
						<image style="width: 40rpx;height: 40rpx;"
							:src="item.selected==true ? '/static/other/radio_selected.png' : '/static/other/radio_default.png'"
							mode=""></image>
					</view>
				</view>

				<view class="flex-row-center-sb" style="margin-top: 40rpx;width: 80%;">
					<view class="alertBtn" style="background-color: #F8F8F8;color: #BFC3CC;" @click="showPayCost=false">
						取消</view>
					<view class="alertBtn" @click="confimPayFee">确定</view>
				</view>

			</view>
		</u-popup>

		<!-- 新增费用弹框 -->
		<u-popup :show="showPopCost" mode="bottom" @close="showPopCost=false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx;">
				<view style="margin-bottom: 30rpx;">新增收费项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.chargeProjectName" placeholder="请输入收费项名称"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="收费类型" required>
						<uni-data-checkbox v-model="customCost.chargeItemsType" :localdata="chargeItemsTypes" />
					</uni-forms-item>

					<uni-forms-item label="单价" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.unitPrice" type="number" placeholder="请输入单价"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="数目" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.number" type="number" placeholder="请输入数量"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="费用合计" labelWidth="90">
						<view> <text
								style="position: relative;top: 15rpx;">{{customCost.number*customCost.unitPrice||'0'}}</text>
						</view>
					</uni-forms-item>

				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import * as api from '@/api/order-api.js';
	export default {
		name: '',
		data() {
			return {
				showPayCost: false,
				payCostList: [],
				currentPayItem: null,
				showPopCost: false,
				chargeItemsTypes: [{
						value: 1,
						text: '按次'
					},
					{
						value: 2,
						text: '按天'
					},
					// {
					// 	value: 3,
					// 	text: '按里程'
					// }
				],
				customCost: {
					chargeProjectName: '',
					chargeMoney: '',
					chargeItemsType: 1,
					canEdit: 3,
					number: '1',
					unitPrice: ''

				},
			}
		},
		props: {
			orderInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			customerInfo: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			btnList() {
				var btnList = [];
				if (this.checkPermi(['order:orderBasic:paymentOfFees'])) {
					btnList.push({
						title: '费用缴纳',
						code: 100
					})
				}

				const orderStatus = this.orderInfo.orderStatus;
				var tmpList = []
				switch (orderStatus) {
					case 0: //待支付
						// if (this.checkPermi(['order:orderBasic:cancel'])) {
							tmpList.push({
								title: '取消订单',
								code: 0,
								path: 'cancleOrder'
							})
						// }
						if (this.checkPermi(['order:orderBasic:distribution'])) {
							tmpList.push({
								title: '订单分配',
								code: 1,
								path: 'staffAllocation'
							})
						}
						if (this.checkPermi(['order:orderBasic:edit'])) {
							tmpList.push({
								title: '编辑订单',
								code: 300,
								path: ''
							})
						}

						break;
					case 1: //待分配
						if (this.checkPermi(['order:orderBasic:cancel'])) {
							tmpList.push({
								title: '取消订单',
								code: 0,
								path: 'cancleOrder'
							})
						}
						if (this.checkPermi(['order:orderBasic:distribution'])) {
							tmpList.push({
								title: '订单分配',
								code: 1,
								path: 'staffAllocation'
							})
						};
						if (this.checkPermi(['order:orderBasic:newExpenses'])) {
							tmpList.push({
								title: '新增费用',
								code: 200,

							})
						}
						if (this.checkPermi(['order:orderBasic:edit'])) {
							tmpList.push({
								title: '编辑订单',
								code: 300,
								path: ''
							})
						}
						break;
					case 2: //待排车			
						if (this.checkPermi(['order:orderBasic:cancel'])) {
							tmpList.push({
								title: '取消订单',
								code: 0,
								path: 'cancleOrder'
							})
						}
						if (this.checkPermi(['order:orderBasic:supplyCar'])) {
							tmpList.push({
								title: '订单排车',
								code: 2,
								path: 'carAllocation'
							})
						};
						if (this.checkPermi(['order:orderBasic:newExpenses'])) {
							tmpList.push({
								title: '新增费用',
								code: 200,

							})
						}
						if (this.checkPermi(['order:orderBasic:edit'])) {
							tmpList.push({
								title: '编辑订单',
								code: 300,
								path: ''
							})
						}

						break;
					case 3: //待取车			
						if (this.checkPermi(['order:orderBasic:cancel'])) {
							tmpList.push({
								title: '取消订单',
								code: 0,
								path: 'cancleOrder'
							})
						}
						if (this.checkPermi(['order:orderBasic:delivery'])) {
							tmpList.push({
								title: '交车验车',
								code: 3,
								path: 'deliveryAndInspection'
							})
						};
						if (this.checkPermi(['order:orderBasic:newExpenses'])) {
							tmpList.push({
								title: '新增费用',
								code: 200,

							})
						}
						if (this.checkPermi(['order:orderBasic:edit'])) {
							tmpList.push({
								title: '编辑订单',
								code: 300,
								path: ''
							})
						}
						break;
					case 4: //用车中
						if (this.checkPermi(['order:orderBasic:alsoCarTest'])) {
							tmpList.push({
								title: '还车验车',
								code: 4,
								path: 'returnTheCarForInspection'
							})
						}
						if (this.checkPermi(['order:orderBasic:isEarlyReturn'])) {
							tmpList.push({
								title: '提前还车',
								code: 5,
								path: 'earlyReturnCar'
							})
						}
						if (this.checkPermi(['order:orderBasic:orderRenewal'])) {
							tmpList.push({
								title: '订单续租',
								code: 6,
								path: 'orderRelet'
							})
						}
						break;
					case 5: //车损结算
						if (this.checkPermi(['order:orderBasic:vehicleDamage'])) {
							tmpList.push({
								title: '车损结算',
								code: 9,
								path: 'carDamageSettlement'
							})
						}
						break;
					case 6: //押金结算
						if (this.checkPermi(['order:orderBasic:depositRefund'])) {
							tmpList.push({
								title: '押金结算',
								code: 7,
								path: 'depositSettlement'
							})
						}
						break;
					case 7: //违章处理
						if (this.checkPermi(['order:orderBasic:handViolations'])) {
							tmpList.push({
								title: '违章处理',
								code: 10,
								path: 'illegalProcessing'
							})
						}
						break;
					case 8: //违章结算
						if (this.checkPermi(['order:orderBasic:IllegalProcessing'])) {
							tmpList.push({
								title: '违章结算',
								code: 8,
								path: 'illegalSettlement'
							})
						}
						break;
					default:
						break;
				}
				btnList = btnList.concat(tmpList);

				return btnList;
			}
		},
		mounted() {
			setTimeout(() => {
				this.paymentFee();
			}, 1000)

		},
		methods: {

			//确定提交费用项
			commitCost() {
				if (uni.$u.test.isEmpty(this.customCost.chargeProjectName)) {
					uni.$u.toast('请输入费用项名称');
					return
				} else if (uni.$u.test.isEmpty(this.customCost.unitPrice)) {
					uni.$u.toast('请输入单价');
					return
				} else if (uni.$u.test.isEmpty(this.customCost.number)) {
					uni.$u.toast('请输入数目');
					return
				} else if (this.customCost.number == '0') {
					uni.$u.toast('数目不能为0,请重新输入');
					return
				} else {
					this.customCost.chargeMoney = this.customCost.number * this.customCost.unitPrice
					api.addNewExpenses({
						orderNo: this.orderInfo.orderNo,
						chargeItemsVo: [this.customCost]
					}).then(res => {
						uni.showToast({
							title: '新增费用成功'
						})
						this.showPopCost = false;
					})

				}
			},
			btnClick(btnInfo) {
				let path = btnInfo.path;
				if (btnInfo.code == 100) { //费用缴纳
					if (this.payCostList.length > 0) {
						this.showPayCost = true;
					} else {
						uni.$u.toast('暂无可缴纳费用');
					}
				} else if (btnInfo.code == 200) { //新增费用
					this.showPopCost = !this.showPopCost;
					this.customCost.chargeProjectName = '';
					this.customCost.unitPrice = '';
					this.customCost.number = '1';
				} else if (btnInfo.code == 300) { //编辑订单
					uni.navigateTo({
						url: '/workbench/order/shortRentOrder/add?orderNo=' + this.orderInfo.orderNo + '&type=2'
					})
				} else {
					var item = {
						orderNo: this.orderInfo.orderNo,
						memberName: this.customerInfo.memberName,
						orderStatus: this.orderInfo.orderStatus,
						memberType: this.customerInfo.memberType,
						memberPhone: this.customerInfo.memberPhone,
						modelName: this.orderInfo.modelName,
						rentalStartTime: this.orderInfo.rentalStartTime,
						rentalEndTime: this.orderInfo.rentalEndTime,
						actualStartTime: this.orderInfo.actualStartTime,
						actualEndTime: this.orderInfo.actualEndTime
					};
					// 判断车辆押金|违章押金是否结清
					if (path == 'depositSettlement' || path == 'illegalSettlement') {
						var param = '';
						if (path == 'depositSettlement') {
							param = item.orderNo + '/1'
						} else {
							param = item.orderNo + '/2';
						}
						api.orderCostIspay(param).then(res => {
							if (res.data.code == 1) {
								uni.showModal({
									title: '提示',
									content: res.data.title,
									cancelText: '取消',
									confirmText: '确认结算',
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: '/order/shortOrder/' + path +
													'?item=' +
													encodeURIComponent(JSON.stringify(item))
											});
										}
									}
								})
							} else {
								uni.navigateTo({
									url: '/order/shortOrder/' + path + '?item=' +
										encodeURIComponent(JSON
											.stringify(item))
								});
							}
						})
					} else {
						uni.navigateTo({
							url: '/order/shortOrder/' + path + '?item=' + encodeURIComponent(JSON
								.stringify(item))
						});
					}
				}
			},
			//费用缴纳按钮
			paymentFee() {
				this.currentPayItem = null;
				this.payCostList = [];
				api.getAllPaymentOfFees(this.orderInfo.orderNo).then(res => {
					let data = res.data;
					data.map(item => {
						if (item.unpaidAmount > 0 && item.payStatus == 1) {
							this.payCostList.push(item);
						}
					})
				})
			},
			changeCostItem(item) {
				this.payCostList.map(costItem => {
					costItem.selected = false;
				})
				item.selected = true;
				this.currentPayItem = item;
				this.$forceUpdate();
			},
			confimPayFee() {
				if (this.currentPayItem) {
					this.showPayCost = false;
					uni.navigateTo({
						url: '/order/shortOrder/orderPayFee?type=' + this.currentPayItem.type + '&orderNo=' + this
							.orderInfo.orderNo
					})
				} else {
					uni.$u.toast('请选择需要缴纳的费用项');
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.btnBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		padding: 0 20rpx;

		.btnItem {
			display: inline-block;
			background-color: $uni-color-primary;
			color: #ffffff;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
			font-size: 28rpx;
			flex: 1;
			margin: 0 10rpx;
		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673FF;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>
